<template>
	<view class="waterfall-component" :style="{ 'grid-column-gap': gap, 'grid-template-columns': `repeat(${count}, 1fr)` }">
		<view class="column" v-for="(column, columnIndex) in count" :key="columnIndex">
			<view :id="`column-${columnIndex}-content`">
				<view class="item" @tap.stop="onTapItem(item)" v-for="(item, index) in listData[columnIndex]" :key="index" :style="{ 'margin-bottom': gap }">
					<image :src="item.image" mode="widthFix" :lazy-load="true" class="item-image"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	/**
	 * 数据
	 */
	props: {
		// 列数
		count: {
			type: Number,
			default: 2
		},

		// 列间距
		gap: {
			type: String,
			default: '24upx'
		}
	},

	/**
	 * 数据
	 */
	data() {
		return {
			listData: [], // 列数据
			columnHs: [], // 列高度
			newData: [], // add 过来的新数据
			newDataIndex: 0 // 当前往列表中更新的数据的下标
		};
	},

	/**
	 * 挂载
	 */
	mounted() {
		for (let index = 0; index < this.count; index++) {
			this.listData.push([]);
			this.columnHs.push(0);
		}
	},

	/**
	 * 方法
	 */
	methods: {
		/**
		 * 添加数据
		 */
		add(data) {
			this.newData = data;
			this.newDataIndex = 0;
			this.pushNewDataItem();
		},
    /**
     * 刷新数据
     */
    refreshData(data) {
      let that=this
      this.listData=[]
      this.columnHs=[]
      for (let index = 0; index < this.count; index++) {
        this.listData.push([]);
        this.columnHs.push(0);
      }
      setTimeout(()=>{
        uni.stopPullDownRefresh();
        that.newData = data;
        that.newDataIndex = 0;
        that.pushNewDataItem();
      },1200)
    },
		/**
		 * 将新数据项添加到瀑布流
		 */
		pushNewDataItem() {
			let _this = this;

			// 判断是否将所有新数据都添加完了？
			if (this.newDataIndex >= this.newData.length) return;

			// 获取最矮列的下标
			let mixHeightCulumnIndex = this.getMinIndex(this.columnHs);

			// 往最矮的那一列添加数据
			this.listData[mixHeightCulumnIndex].push(this.newData[this.newDataIndex]);

			// 更新这一列的高度
			const query = uni.createSelectorQuery().in(this);
			this.$nextTick(() => {
				setTimeout(() => {
					query
						.select(`#column-${mixHeightCulumnIndex}-content`)
						.boundingClientRect(info => {
							_this.columnHs[mixHeightCulumnIndex] = info.height;
							_this.newDataIndex = _this.newDataIndex + 1;
							_this.pushNewDataItem();
						})
						.exec();
				}, 100);
			});
		},

		/**
		 * item 点击事件
		 * @param {Object} item 数据对象
		 */
		onTapItem(item) {
			this.$emit('tapItem', item);
		},

		/**
		 * 获取最小值的下标
		 */
		getMinIndex(arr) {
			let min = arr[0];
			let index = 0;
			for (let i = 0; i < arr.length; i++) {
				if (min > arr[i]) {
					min = arr[i];
					index = i;
				}
			}
			return index;
		}
	}
};
</script>

<style lang="scss" scoped>
.waterfall-component {
	width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-rows: auto;
	grid-auto-flow: row dense;
}

.item {
	border-radius: 8upx;
	overflow: hidden;
}

.item-image {
	width: 100%;
	display: block;
}

.title {
	display: block;
	height: 60upx;
	line-height: 60upx;
	text-align: center;
	font-weight: 500;
	color: #050505;
	font-size: 28upx;
	background: #f2f3f4;
}
</style>
